import React, { Component } from 'react'
import { Button, Form, Input, Select, Row, Col } from 'antd'
const createForm = Form.create
const FormItem = Form.Item

function noop() {
  return false;
}

@Form.create({
  onFieldsChange(props, items) {
    console.log(props)
    console.log(items)
    // props.cacheSearch(items);
  },
})

export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
    }
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  //handleOk(){
  //    this.setState({loading: true})
  //    setTimeout(() => {
  //        this.setState({loading: false})
  //    },3000)
  //}

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      this.setState({loading: true})
      setTimeout(() => {
        this.setState({loading: false})
        this.props.handleOk(false)
      }, 3000)

      console.log('Submit!!!');
      console.log(values);
    });
  }


  render() {
    const { getFieldProps } = this.props.form;
    // debugger
    const codeProps = getFieldProps('usercode', {
      rules: [
        {required: true},
      ],
    })
    const nameProps = getFieldProps('username', {
      rules: [
        {required: true},
      ],
    })
    const userpwdProps = getFieldProps('userpwd')
    const longmobileProps = getFieldProps('longmobile')
    const shortmobileProps = getFieldProps('shortmobile')
    const postProps = getFieldProps('post')
    const formItemLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 17},
    }
    return (
      <div className="modalcontent">
        <Form horizontal>
          <FormItem {...formItemLayout} label="警员账号">
            <Input {...codeProps} />
          </FormItem>
          <FormItem {...formItemLayout} label="警员名称">
            <Input  {...nameProps}  />
          </FormItem>
          <FormItem {...formItemLayout} label="账号密码	">
            <Input  {...userpwdProps}  />
          </FormItem>
          <FormItem {...formItemLayout} label="手机号码	">
            <Input {...longmobileProps}   />
          </FormItem>
          <FormItem {...formItemLayout} label="手机短号	">
            <Input  {...shortmobileProps}  />
          </FormItem>
          <FormItem {...formItemLayout} label="警员职务	">
            <Input  {...postProps}  />
          </FormItem>
          <FormItem wrapperCol={{ span: 12, offset: 7 }}>
            <Button type="primary" onClick={this.handleSubmit} loading={this.state.loading}>确定</Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}
